import { Form, Col, Input, Row,Spin} from 'antd';
import React, { useState } from 'react';
import { formatMessage } from 'umi';
import styles from './style.less';
import {getImageCaptchaBaseUrl} from '@/utils/default'

const FormItem = Form.Item;

const ImgCaptchaInput = (props) => {

    const {
        form,
        imageCaptchaApplyId,
        onClickImage = () => {}
    } = props

    return (
        <Row gutter={8}>
          <Col span={16}>
            <FormItem
              name="imgCaptchaCode"
              rules={[
                {
                  required: true,
                  message: "请输入图片验证码",
                },
              ]}
            >
              <Input
                size="large"
                placeholder="请输入图片验证码"
              />
            </FormItem>
          </Col>
          <Col span={8}>
            <Spin  spinning={imageCaptchaApplyId === ''}>
              <img onClick={onClickImage} className={styles.imgCaptcha} src={getImageCaptchaBaseUrl + imageCaptchaApplyId}></img>
            </Spin>
          </Col>
        </Row>
    )
}

export default ImgCaptchaInput;